<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="userCommon::common-header"></head>
<body class="sb-nav-fixed bg-cover" th:style="'background-image: url(/img/baomingxuanke.jpeg)'">
<nav th:replace="userCommon::common-navbar"></nav>
<div id="layoutSidenav">
    <div th:replace="userCommon::common-sidenav"></div>

    <div id="layoutSidenav_content">
        <main>
            <div class="container-fluid px-4">
                <h1 class="mt-4">报名选课</h1>

                <ol class="breadcrumb mb-4">
                    <li class="breadcrumb-item"><a th:href="@{/toUserMain}">主页</a></li>
                    <li class="breadcrumb-item active">报名选课</li>
                </ol>

                <div class="card mb-4 table">
                    <div class="card-header">
                        <i class="fas fa-table me-1"></i>
                        课程信息表
                    </div>
                    <div class="card-body">
                        <table id="datatablesSimple">
                            <thead>
                            <tr>
                                <th>编号</th>
                                <th>名称</th>
                                <th>时间</th>
                                <th>时长</th>
                                <th>教练</th>
                                <th>操作</th>
                            </tr>
                            </thead>

                            <tbody>
                            <tr th:each="class:${classList}">
                                <td th:text="${class.id}">编号</td>
                                <td th:text="${class.className}">名称</td>
                                <td th:text="${#dates.format(class.classBegin, 'yyyy年MM月dd日 HH:mm:ss')}">时间</td>
                                <td th:text="${class.classTime}">时长</td>
                                <td th:text="${class.coach}">教练</td>
                                <td>
                                    <a th:href="@{/user/applyClass(classId=${class.id}) }" style="text-decoration: none">
                                        <input type="button" class="btn btn-sm btn-outline-primary" value="报名">
                                    </a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </main>
        <footer th:replace="userCommon::common-footer"></footer>
    </div>
</div>

<!-- 1. 隐藏元素存储后端参数（替代Thymeleaf内联） -->
<input type="hidden" id="alreadyEnrolledFlag" th:value="${alreadyEnrolled != null ? alreadyEnrolled : false}">

<!-- 2. 重复报名提示弹窗（Bootstrap标准结构，与项目风格一致） -->
<div class="modal fade" id="enrollAlertModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">提示</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <p>您已经报名过该课程了！</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">知道了</button>
            </div>
        </div>
    </div>
</div>

<div th:include="userCommon::common-scripts"></div>

<script>
    // 页面加载完成后执行（参考userClass.html的退课确认逻辑）
    document.addEventListener('DOMContentLoaded', function() {
        // 读取隐藏元素的值（替代内联语法）
        const flagElement = document.getElementById('alreadyEnrolledFlag');
        const alreadyEnrolled = flagElement ? (flagElement.value === 'true') : false;

        // 如果已报名，显示弹窗（Bootstrap模态框标准用法）
        if (alreadyEnrolled) {
            const modal = new bootstrap.Modal(document.getElementById('enrollAlertModal'));
            modal.show();
        }
    });
</script>

</body>
</html>
